<template>
  <div>

    <div style="border: 1px solid #ccc; margin-top: 10px">
      <!-- 工具栏 -->
      <Toolbar
          style="border-bottom: 1px solid #ccc"
          :editor="editor"
          :defaultConfig="toolbarConfig"
      />
      <!-- 编辑器 -->
      <Editor
          style="height: 400px; overflow-y: hidden"
          :defaultConfig="editorConfig"
          v-model="html"
          @onChange="onChange"
          @onCreated="onCreated"
      />
    </div>

  </div>
</template>

<script>
import {Editor, Toolbar} from "@wangeditor/editor-for-vue";

export default {
  props: {
    content: {
      type: String,
      default: "",
    }
  },
  name: "MyEditor",
  components: {Editor, Toolbar},
  data() {
    return {
      editor: null,
      html: "",
      toolbarConfig: {
        // toolbarKeys: [ /* 显示哪些菜单，如何排序、分组 */ ],
        // excludeKeys: [ /* 隐藏哪些菜单 */ ],
      },
      editorConfig: {
        placeholder: "请输入内容...",
        // autoFocus: false,
        MENU_CONF: {
          uploadImage: {
            // server: process.env.VUE_APP_SERVER+"/wangeditorUploads",//上传接口地址
            server: "http://localhost:9090/file/uploadImg",//上传接口地址
            // headers: {
            //     token: JSON.stringify(JSON.parse(localStorage.getItem("user")).token)
            // },
            // customInsert(res,insertFn){
            //   console.log(res,'---res-----')
            //   const url = res.data; // 假设服务器返回的数据中图片URL在data字段中
            //   insertFn(url); // 调用插入图片的方法，传入图片URL
            // },
            //// 单个文件上传成功之后
            // onSuccess(file, res) {          // JS 语法
            //   //console.log(`${file.name} 上传成功`, res)
            //   console.log(file,'----file-----')
            //   console.log(res,'---res-----')
            // },
            fieldName: 'file',//上传文件名
          },
          uploadVideo: {
            server: process.env.VUE_APP_SERVER + "/wangeditorUploads",//上传接口地址
            headers: {
              token: localStorage.getItem("token")
            },
            fieldName: 'file'//上传文件名
          }
        }
      },
    };
  },
  //监听数值
  watch: {
    content(newValue) {
      console.log(newValue, 'newValue')
      this.html = newValue;
    }
  },
  created() {
  },
  methods: {
    onChange(editor) {
      console.log("onChange", editor.getHtml())
      this.$emit("content-change", editor.getHtml())
    },
    onCreated(editor) {
      this.editor = Object.seal(editor);
    },
  },
  mounted() {
  },
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy();
  },
};

</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>


<!--<el-dialog title="信息" :visible.sync="dialogFormVisible" width="81%"  :before-close="cancel">-->
<!--<CustomEditor :content="form.content" @content-change="contentChange"></CustomEditor>-->
<!--cancel(){-->
<!--this.dialogFormVisible = false-->
<!--console.log("执行")-->
<!--location.reload();-->
<!--},-->
<!--contentChange(e) {-->
<!--console.log(e)-->
<!--this.form.content=e-->
<!--},-->

<!--保存需要添加          location.reload();-->
